:root {
    --sl-color-accent-low: #002b24;
    --sl-color-accent: #bdbdbd;
    --sl-color-accent-high: #bdbdbd;
    --sl-color-white: #c7a06f;
    --sl-color-gray-1: #c17ac8;
    --sl-color-gray-1-1: #957497;
    --sl-color-gray-2: #b4b4b4;
    --sl-color-gray-3: #6d6d6d;
    --sl-color-gray-4: #c55858;
    --sl-color-gray-5: #bdbdbd;
    --sl-color-gray-6: #543768;
    --sl-color-black: #15141b;
    --sl-button-bg-primary: #347c64;
    --sl-button-bg-secondary: #553f64;
    --react-toggle-checked: #aa4bb3;
    --details-1: #2a2a2c;
    --details-2: #543768;
    --details-3: #54385f;
    --url-colour: #54c59f;
    --url-colour-hover: #6cb2c7;
    --code-inline-background: #321735;
    --code-inline-color: #bdbdbd;
    --code-inline-border: #45aa88;
    --tab-background-if: #ab94b4;
    --tab-background-oof: #54385f;
    --tab-color-if: #111011;
    --tab-color-oof: #828285;
    --steps-border: #aa4bb3;
    --modal-url-color: var(--sl-color-black);
    --modal-url-hover-color: rgb(255, 255, 255);
    --modal-url-bg-color: var(--code-inline-border);
    --modal-url-bg-hv-color: rgb(34, 199, 191);
}

:root[data-theme="light"] {
    --sl-color-accent-low: #f5b5ea;
    --sl-color-accent: #136454;
    --sl-color-accent-high: #003c33;
    --sl-color-white: #1d122b;
    --sl-color-gray-1: #31154f;
    --sl-color-gray-2: #432863;
    --sl-color-gray-3: #634987;
    --sl-color-gray-4: #977cbf;
    --sl-color-gray-5: #c8bbde;
    --sl-color-gray-6: #f1e9ff;
    --sl-color-gray-7: #dedae6;
    --sl-color-black: #e7e6e6;
    --sl-button-bg-primary: #c1dad1;
    --sl-button-bg-secondary: #beadc9;
    --react-toggle-checked: #aa4bb3;
    --details-1: #a0b494;
    --details-2: #4c0879;
    --details-3: #d6d6d6;
    --url-colour: #660891 !important;
    --url-colour-hover: #14574c !important;
    --code-inline-background: #54c59f;
    --code-inline-color: #000;
    --code-inline-border: #002b24;
    --tab-background-if: #ab94b4;
    --tab-background-oof: #54385f;
    --tab-color-if: #111011;
    --tab-color-oof: rgb(210, 210, 214);
    --steps-border: #aa4bb3;
    --modal-url-color: var(--sl-color-black);
    --modal-url-hover-color: rgb(0, 0, 0);
    --modal-url-bg-color: var(--code-inline-border);
    --modal-url-bg-hv-color: rgb(34, 199, 191);
}

/* Theme adjustments */

.sl-steps li::before {
    border: 1px solid var(--steps-border) !important;
    box-shadow: none !important;
    border-radius: 0% !important;
    line-height: 2em !important;
}

.sl-steps li::after {
    border: 1px solid var(--steps-border) !important;
}

.right-sidebar.astro-67yu43on {
    max-width: 100%;
}

p a {
    color: var(--url-colour) !important;
}

p a:hover {
    color: var(--url-colour-hover) !important;
}

[data-has-sidebar] {
    .sl-container {
        max-width: 100%;
    }
}

.sl-markdown-content code:not(:where(.not-content *)) {
    background-color: var(--code-inline-background);
    border-radius: none;
    font-size: 0.8em;
    color: var(--code-inline-color);
    border: 1px solid var(--code-inline-border);
}


/* resize the card svg logos */

.card-logos-image * {
    max-height: 100px;
    min-height: 100px;
    width: 100%;
}

/* front page card stuff */

.float-container {
    padding: 0;
}

.float-child {
    padding: 100px;
}

.float-child.card-image {
    width: 50%;
    max-width: 100px;
    min-height: 150px;
    float: left;
    padding: 0;
}

.float-child.card-text {
    margin: auto;
    padding: 0;
    padding-left: 10px;
}

/* front page button stuff */

.title {
    align-items: left !important;
    margin-left: 31% !important;
}

.card-image {
    margin-right: 5% !important;
    margin-left: 2% !important;
    width: 150px !important;
    max-width: 150px;
    padding: 0;
}

.sl-flex.actions.astro-jbfsktt5 a {
    min-width: 45%;
    border: 3px solid var(--sl-color-white);
}

.sl-flex.action.primary.astro-yjy4zhro {
    border-radius: 3px;
    background-color: var(--sl-button-bg-primary) !important;
    padding: 2px 2px 4px 10px !important;
    border-color: var(--sl-button-bg-secondary) !important;
    color: var(--sl-color-accent) !important;
}

.sl-flex.action.secondary.astro-yjy4zhro {
    border-radius: 3px !important;
    background-color: var(--sl-button-bg-secondary) !important;
    padding: 2px 2px 4px 10px !important;
    border-color: var(--sl-button-bg-primary) !important;
    color: var(---sl-color-accent) !important;
}

/* tabs stuff start */

a[aria-selected="true"] {
    border-top: 1px solid var(--sl-color-white) !important;
    border-bottom: 1px solid var(--sl-color-white) !important;
    color: var(--tab-color-if) !important;
    background-color: var(--tab-background-if) !important;
}

a[tabindex="-1"] {
    border-top: 1px solid var(--sl-button-bg-secondary) !important;
    border-bottom: 1px solid var(--sl-button-bg-secondary) !important;
    background-color: var(--tab-background-oof) !important;
    color: var(--tab-color-oof) !important;
}

/* react toggle start */

.toggle-global {
    margin: 20px 16px 16px 0;
    padding-top: 5px;
    padding-left: 5px;
}

.react-toggle-track-x {
    margin: 0 3px 0 0;
    padding-bottom: 17px;
}

.react-toggle-track-check {
    margin: 0;
    padding-bottom: 16px;
}

.react-toggle-track {
    min-width: 16px;
    background-color: #6d6d6d !important;
}

.react-toggle-thumb {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border: 3px solid !important;
    border-color: #54c59f !important;
}

.react-toggle .react-toggle-thumb {
    background-color: #c7a06f !important;
}

.react-toggle--checked .react-toggle-thumb {
    background-color: #8464c6 !important;
}

.react-toggle--checked .react-toggle-track {
    background-color: var(--react-toggle-checked) !important;
}


/* react toggle end */

/* react tooltip end */

.my-tooltip {
    padding-bottom: 5px !important;
    position: absolute !important;
    z-index: 9999 !important;
    max-width: 400px;
    max-height: 400px;
    border: 2px solid var(--react-toggle-checked);
    opacity: 1 !important;
}

/* react tooltip end */

/* make sure there is a gap when it is rendered on page */

#Advanced-class {
    padding-top: 15px;
    margin: auto;
}

/* resized main widows where toc is fml */

.main-pane {
    min-width: 75% !important;
}

/* .tooltip-link {} */

.tooltip-line {
    display: block;
    margin-bottom: 2px;
}

.custom-content .mxgraph {
    width: 100% !important;
    height: 100% !important;
}

/* starlight aside stuff */

.starlight-aside {
    color: var(--sl-color-gray-2) !important;
    padding: 1rem;
    border-inline-start: 0.25rem solid;
    border-left: 1px solid;
    border-bottom: 1px solid;
}

.expressive-code .ec-line {
    tab-size: 4;
}

.starlight-aside__icon {
    display: none !important;
}

.starlight-aside--note .starlight-aside__title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: rgba(76, 179, 212);
    border-radius: 100%;
}

.starlight-aside--tip .starlight-aside__title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: rgba(0, 148, 0, 1);
    border-radius: 100%;
}

.starlight-aside--caution .starlight-aside__title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: rgba(230, 167, 0);
    border-radius: 100%;
}

.starlight-aside--danger .starlight-aside__title::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: rgba(225, 50, 56);
    border-radius: 100%;
}

.starlight-aside--note {
    border-color: rgba(76, 179, 212);
    background-color: rgba(76, 179, 212, 0.05);
}

.starlight-aside--tip {
    border-color: rgba(0, 148, 0);
    background-color: rgba(0, 148, 0, 0.05);
}

.starlight-aside--caution {
    border-color: rgba(230, 167, 0);
    background-color: rgba(230, 167, 0, 0.05);
}

.starlight-aside--danger {
    border-color: rgba(225, 50, 56);
    background-color: rgba(225, 50, 56, 0.05);
}

.starlight-aside__title {
    margin-top: -8px !important;
    margin-left: 0 !important;
    margin-bottom: -5px !important;
}

.starlight-aside__content {
    margin-bottom: -10px !important;
    padding-bottom: 0 !important;
}

[class*="starlight-aside--"] {
    background-color: transparent !important;
}

.my-icon-container {
    padding: 0 0 10px 10px;
}

.my-icon-container.star-tip {
    border: 3px solid #ffae35;
}

.my-icon-container.danger {
    border: 3px solid #ba1522;
}

.my-icon-container.warning {
    border: 3px solid #ffae35;
}

.my-icon-container.note {
    border: 3px solid #0095ff;
}

.my-icon-container.tip {
    border: 3px solid #1fc6a0;
}

.my-icon {
    width: 100px !important;
    max-width: 100px !important;
}

.my-icon-image {
    margin-left: -13px !important;
    height: 30px !important;
}

.my-icon-image.tip {
    margin-top: -3.6px !important;
    margin-left: -12.5px !important;
}

.my-icon-image.note {
    margin-top: -2.5px !important;
    margin-left: -12px !important;
}

.my-icon-image.star-tip {
    margin-top: -2.5px !important;
}

.my-icon-image.warning {
    margin-top: -3.6px !important;
    margin-left: -12px !important;
}

.my-icon-image.danger {
    margin-top: -2.5px !important;
    margin-left: -12px !important;
}

.my-icon-text {
    margin-top: 0 !important;
    width: 100% !important;
}

/* .tooltip-link {} */

.tooltip-line {
    display: block;
    margin-bottom: 2px;
}

.tooltippy-line {
    margin: 10px 0 5px 0;
}

.tooltippy-link {
    margin: 0 ;
}

.tooltippy-div {
    margin: 5px 0 0 0;
}

.tippy-box {
    border: 4px solid var(--react-toggle-checked);
    opacity: 1 !important;
    padding: 5px 4px;
    margin-bottom: 0;
}

/* .tippy-content {} */

.my-tooltip-url {
    color: var(--url-colour) !important;
}

.my-tooltip-url:hover {
    color: var(--url-colour-hover) !important;
    cursor: pointer;
}

.tooltippy-link {
    color: var(--url-colour) !important;
}

.tooltippy-link:hover {
    color: var(--url-colour-hover) !important;
    cursor: pointer;
}

.sl-markdown-content details:not(:where(.not-content *)) {
    --sl-details-border-color--hover: var(--sl-color-gray-1);

    border-inline-start: 0 solid var(--sl-details-border-color);
    padding-inline-start: 0.6rem;
    padding-left: 0 !important;
}

.sl-markdown-content details[open]>summary:not(:where(.not-content *)) {
    margin-bottom: 0;
}
